<template>
  <view class="container">
    <view class="flex">
      <up-search placeholder="搜索" shape="round" v-model="keyword"></up-search>
      <view @click="showPicker = true">社区网格</view>
    </view>
    <up-subsection :list="list" :current="1"></up-subsection>
    <view
      class="box"
      v-for="(item, index) in lists"
      :key="index"
      @click="togoPatrolRecord(item)"
    >
      <view class="flex addr justify-between">
        <view>{{ item.name }}</view>
        <view>{{ item.phone }}</view>
      </view>
      <view class="addr"> 详情地址：{{ item.detail }} </view>
      <view class="flex addr justify-between">
        <view @click.stop="handlePopup(item)">处理人：{{ item.name }}</view>
        <view>{{ item.phone }}</view>
      </view>
    </view>
    <up-popup
      mode="center"
      :show="showPopup"
      @close="closePopup"
      @open="openPopup"
      :round="10"
    >
      <view class="inteInfo-popup">
        <view class="flex flex-evenly">
          <view>姓名</view>
          <view>所属组织</view>
          <view>电话</view>
        </view>
        <view class="flex flex-evenly padding-t-10" v-for="(item, index) in 6" :key="index">
          <view>222222</view>
          <view>333</view>
          <view class="color-red" @click="handlePhoneCall(item)">一键拨打</view>
        </view>
      </view>
    </up-popup>
    <up-picker :show="showPicker" :columns="columnsPicker"></up-picker>
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import bus from "@/utils/Eventbus.js";

const showPicker = ref(false);
const columnsPicker = reactive([["中国", "美国", "日本"]]);

const list = ref(["未付款", "待评价"]);

const lists = reactive([
  {
    id: 482980352552773,
    name: "阿达说的阿萨德",
    phone: "网格01",
    detail: "桃园路2号 深圳市南山区人民政府",
    isDefault: true,
  },
]);

let showPopup = ref(false);

const closePopup = () => {
  showPopup.value = false;
};

const openPopup = () => {};

const handlePopup = () => {
  showPopup.value = true;
};

const togoPatrolRecord=(item)=>{
	uni.navigateTo({
    url: '/pages/patrol/record'
  })
}

const handlePhoneCall=(item)=>{
	uni.makePhoneCall({
		phoneNumber: item
	});
}
</script>


<style>
page {
  background-color: #f5f5f5;
}
</style>
<style scoped lang="scss">
.inteInfo-popup {
  width: 540rpx;
  text-align: center;
  border-radius: 30rpx;
  padding: 20rpx 0;
  .title {
    font-size: 34rpx;
    font-weight: 600;
    color: #000000;
    padding-bottom: 20rpx;
  }

  .info-text {
    padding: 20rpx 0;
    font-size: 32rpx;
    color: #888888;
  }
}
.container {
  padding: 16rpx 32rpx;

  .box {
    padding: 24rpx 24rpx;
    background: #fff;
    border-radius: 12rpx;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      justify-content: space-between;
    }

    .addr {
      padding-top: 8rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #666666;
    }

    .operate {
      font-size: 28rpx;
      font-weight: 400;
      color: #141f33;
    }

    .default {
      font-size: 28rpx;
      font-weight: 400;
      color: #222222;
      padding-left: 10rpx;
    }
  }
}

.btn {
  position: fixed;
  left: 50%;
  bottom: 0;
  top: 50%;
  transform: translate(-50%, 30%);
  display: flex;
  align-items: center;

  .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 180rpx;
    font-size: 28rpx;
    padding: 10rpx 26rpx;
    background: linear-gradient(88deg, #3677f7 0%, #3ccbff 100%);
    box-shadow: 0rpx 12rpx 40rpx 2rpx rgba(54, 119, 247, 0.2);
    border-radius: 44rpx;
    opacity: 1;
    color: #fff;
  }
}
</style>